<!-- views/System.vue -->
<template>
  <div class="system-container">
    <div class="system-body">
      <!-- 左侧子菜单 -->
      <el-menu
        class="system-sidebar"
        mode="vertical"
        :default-active="$route.path"
        router
      >
        <el-menu-item index="/system/user">
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="/system/problem">
          <span>反馈处理</span>
        </el-menu-item>
        <el-menu-item index="/system/item">
          <span>字典管理</span>
        </el-menu-item>
      </el-menu>

      <!-- 右侧内容区域 -->
      <div class="system-content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<style scoped>
.system-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 100px);
}

.system-body {
  display: flex;
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.system-sidebar {
  width: 200px;
  border-right: 1px solid #ebeef5;
  height: calc(100vh - 180px);
}

.system-content {
  flex: 1;
  padding: 20px;
  min-height: 400px;
}
</style>